<template>
  <div class="main">
    <form>
      <input-validate
        class="input"
        title="持卡人姓名:"
        v-model="info.name"
        placeholder="请输入您的姓名"
        v-validate="'required'"
        name="name"
        type="text"
        data-vv-value-path="innerValue"
        data-vv-validate-on="input"
        data-vv-as="您的姓名"
        :error="errors.first('name')"
      >
      </input-validate>
      <input-validate
        class="input"
        title="银行卡号:"
        v-model="info.bankNum"
        placeholder="请输入您的银行卡号"
        v-validate="'required'"
        name="bankNum"
        type="number"
        data-vv-value-path="innerValue"
        data-vv-validate-on="input"
        data-vv-as="您的银行卡号"
        :error="errors.first('bankNum')"
      >
      </input-validate>
      <md-field-item
        class="input"
        title="所属银行:"
        :content="info.card"
        @click="showSelector"
        arrow
        solid
      ></md-field-item>
      <input-validate
        class="input"
        title="开户行:"
        v-model="info.openingBank"
        placeholder="请输入您的银行卡开户行"
        v-validate="'required'"
        name="openingBank"
        type="text"
        data-vv-value-path="innerValue"
        data-vv-validate-on="input"
        data-vv-as="您的银行卡开户行"
        :error="errors.first('openingBank')"
      >
      </input-validate>
      <input-validate
        class="input"
        title="银行预留手机号:"
        v-model="info.mobile"
        placeholder="请输入银行预留手机号"
        v-validate="'required'"
        name="mobile"
        type="phone"
        data-vv-value-path="innerValue"
        data-vv-validate-on="input"
        data-vv-as="银行预留手机号"
        :error="errors.first('mobile')"
      >
      </input-validate>
      <input-validate
        class="input"
        v-model="info.imgCode"
        title="图形验证码:"
        placeholder="请输入图形验证码"
        v-validate="'required|max:4'"
        rightType="1"
        :imgUrl="imgSrc"
        name="imgcode"
        type="digit"
        data-vv-value-path="innerValue"
        data-vv-validate-on="input"
        data-vv-as="图形验证码"
        :error="errors.first('imgcode')"
        @changeImg="changeImg"
      >
      </input-validate>
      <input-validate
        class="input"
        v-model="info.code"
        title="短信验证码:"
        placeholder="请输入短信验证码"
        v-validate="'required|max:6'"
        rightType="2"
        name="code"
        type="digit"
        data-vv-value-path="innerValue"
        data-vv-validate-on="input"
        data-vv-as="短信验证码"
        :error="errors.first('code')"
        @sendCode="sendCode"
        ref="code"
      >
      </input-validate>
      <md-button type="primary" class="confirm" @click="confirm"
        >确认添加</md-button
      >
    </form>
    <md-selector
      v-model="isSelectorShow"
      :default-value="info.bankId"
      :data="bankInfo"
      max-height="320px"
      title="新增银行卡"
      @choose="onSelectorChoose"
    ></md-selector>
  </div>
</template>

<script>
import { InputItem, Field, Button, Selector, FieldItem } from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.mobile("mobile", "请输入正确的手机号");
export default {
  name: "login",
  components: {
    inputValidate,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Button.name]: Button,
    [Selector.name]: Selector,
    [FieldItem.name]: FieldItem
  },
  data() {
    return {
      info: {
        name: "", //姓名
        bankNum: "", //银行卡号
        bankId: "", //银行卡id
        card: "", //所属银行
        openingBank: "", //开户行
        mobile: "", //手机号
        imgCode: "", //图形验证码
        code: "" //短信验证码
      },
      bankInfo: [],
      imgSrc: "",
      isSelectorShow: false
    };
  },
  methods: {
    getCode() {
      this.$ajax
        .get(this.$api.getPicCode)
        .then(res => {
          this.imgSrc = res.data.code;
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    changeImg() {
      this.getCode();
    },
    showSelector() {
      this.isSelectorShow = true;
    },
    onSelectorChoose({ text, value }) {
      this.info.card = text;
      this.info.bankId = value;
    },
    getBankInfo() {
      this.$ajax
        .post(this.$api.getBankInfo)
        .then(res => {
          res.data.data.forEach(item => {
            let obj = {};
            obj.text = item.name;
            obj.value = item.id;
            this.bankInfo.push(obj);
          });
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    sendCode() {
      if (this.info.card.length > 0) {
        this.$validator
          .validateAll({
            name: this.info.name, //姓名
            bankNum: this.info.bankNum, //银行卡号
            card: this.info.card, //所属银行
            openingBank: this.info.openingBank, //开户行
            mobile: this.info.mobile, //手机号
            imgcode: this.info.imgCode //图形验证码
          })
          .then(result => {
            if (result) {
              let data = {
                mobile: this.info.mobile,
                type: "bank",
                code: this.info.imgCode
              };
              this.$ajax
                .post(this.$api.getSendCode, data)
                .then(() => {
                  this.$refs.code.countdown();
                })
                .catch(err => {
                  this.$toast.failed(err);
                });
            }
          });
      } else {
        this.$toast.failed("请选择所属银行！");
      }
    },
    confirm() {
      if (this.info.card.length > 0) {
        this.$validator.validate().then(result => {
          if (result) {
            let data = {
              bank_num: this.info.bankNum,
              bank_mobile: this.info.mobile,
              bank_name: this.info.openingBank,
              card_id: this.info.bankId,
              card_name: this.info.name,
              code: this.info.code
            };
            this.$ajax
              .post(this.$api.addBankCard, data)
              .then(res => {
                this.$toast.succeed(res.data.msg);
                this.$router.go(-1);
              })
              .catch(err => {
                this.$toast.failed(err);
              });
          }
        });
      } else {
        this.$toast.failed("请选择所属银行！");
      }
    }
  },
  mounted() {
    this.getCode();
    this.getBankInfo();
  }
};
</script>

<style scoped lang="stylus">
.main{
  padding 70px 23px;
  background-color #ffffff
  margin-top 24px;
}
.input{
  margin-bottom 30px;
}
  .confirm{
    width 406px;
    height: 88px;
    margin 70px auto;
    border-radius:16px;
    background-color #317EB9;
  }
.md-button.primary::after{
  border none;
}
</style>
